<template>
  <div class="my">
    <div class="user-info">
      <img :src="userInfo.avatar" class="avatar">
      <h2>{{ userInfo.name }}</h2>
    </div>
    
    <div class="sections">
      <div class="section">
        <h3>我的书架</h3>
        <div class="book-list">
          <!-- 书架内容 -->
        </div>
      </div>
      
      <div class="section">
        <h3>阅读记录</h3>
        <div class="reading-history">
          <!-- 阅读记录 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/store'

const userInfo = computed(() => useUserStore().userInfo)

// TODO: 获取用户信息和相关数据
</script>

<style scoped lang="scss">
.my {
  padding: 20px;

  .user-info {
    text-align: center;
    margin-bottom: 30px;
    
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    
    h2 {
      margin: 10px 0;
    }
  }

  .sections {
    .section {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      
      h3 {
        margin: 0 0 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
      }
    }
  }
}
</style>